<template>
	<bottom-popup :show="popupShow" bgcolor="transparent"  @close="onClose">
		<view class="containers">
			<view class="popup" @click.stop="popup">
				<view class="conts"> 
					<view class="titles">请先授权登陆</view>
					<view class="desc">获取你的公开信息（昵称、头像等）</view>
					<!-- #ifdef MP-WEIXIN -->
					<button class="btn shadow" open-type="getUserInfo" lang="zh_CN" @getuserinfo="bindGetUserInfo">授权登陆</button>
					<!-- #endif -->
				</view>
			</view>
		</view>
	</bottom-popup>
</template>

<script>
import BottomPopup from "@/components/popup-layer/bottom-popup.vue"
import PopupLayer from "@/components/popup-layer/popup-layer.vue"
import UserModule from "@/Api/User.js"

export default {
	name: 'accredit',
	components: {
		PopupLayer,
		BottomPopup
	},
	data() {
		return {
			popupShow: false,
			provider: ''
		};
	},
	onLoad() {
		uni.getProvider({
			service: 'oauth',
			success: result => {
				// console.log(result.provider)
				result.provider.forEach(item => {
					if (item == 'weixin') {
						this.provider = item;
					}
				});
			}
		})
	},
	methods: {
		show() {
			this.popupShow = true
			// this.$refs.showPicker.show()
		},
		close() {
			this.popupShow = false
			// this.$refs.showPicker.close();
		},
		onClose() {
			this.popupShow = false
		},
		bindGetUserInfo(e) {
			if (e.detail.userInfo) {
				this.$store.commit('setUserInfo', {
					nickName: e.detail.userInfo.nickName,
					avatarUrl: e.detail.userInfo.avatarUrl,
				})
				this.$store.commit('setUserAccredit', false)
				UserModule.userinfo(e.detail)
					.then((res)=>{
						uni.showToast({
							title: '授权成功',
							icon: 'success'
						})
						// 用户按了允许授权按钮
						this.$emit('userInfo');
					})
			} else {
				//用户按了拒绝按钮
				uni.showModal({
					title: '提示',
					content: '为了更好的服务，请允许授权登录.',
					showCancel: false,
					confirmText: '返回授权',
					confirmColor: '#1BAC1A'
				});
			}
		},
		popup() {}
	}
};
</script>

<style lang="scss" scoped>
.containers{
	display: flex;
	justify-content: center;
}

.popup {
	background: #ffffff;
	border-radius: 36upx;
	width: 700upx;
	height: 472upx;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 25upx;
}

.conts {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.titles {
	font-size: 42upx;
	color: #333333;
	line-height: 59upx;
	margin-bottom: 40upx;
}

.desc {
	font-size: 32upx;
	color: #999999;
	line-height: 45upx;
	margin-bottom: 90upx;
}

.btn {
	line-height: 88upx;
	height: 88upx;
	width: 580upx;
	padding: 0;
	background: #1bac1a;
	border-radius: 44upx;
	font-size: 36upx;
	color: #ffffff;
}

.btn::after {
	border: none;
}
</style>
